<template>
    <el-container>
        <el-aside :width="leftMenuBox" class="left-menu-box">
            <el-header>
                <img src="../assets/petLogo.png" v-if="!isCollapse">
                <img class="logo2" src="../assets/petLogo2.png" v-else>
            </el-header>
            <el-main><el-menu :default-active="this.$router.path" class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose" :collapse="isCollapse" background-color="#71c9ce" text-color="#000"
                    active-text-color="#fff" :collapse-transition="false" :unique-opened="true" :router="true">
                    <el-submenu index="/home/businessList" default-openeds="1">
                        <template slot="title">
                            <i class="el-icon-s-shop" style="color:rgb(43,43,43)"></i>
                            <span slot="title">商家管理</span>
                        </template>
                        <el-menu-item index="/home/businessList">
                            <template slot="title">
                                <i class="el-icon-folder-add" style="color:rgb(43,43,43)"></i>
                                <span slot="title">商家列表</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/home/businessAdd">
                            <template slot="title">
                                <i class="el-icon-folder-add" style="color:rgb(43,43,43)"></i>
                                <span slot="title">新增商家</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="/home/userList">
                        <template slot="title">
                            <i class="el-icon-user" style="color:rgb(43,43,43)"></i>
                            <span slot="title">用户管理</span>
                        </template>
                        <el-menu-item index="/home/userList">
                            <template slot="title">
                                <i class="el-icon-folder-add" style="color:rgb(43,43,43)"></i>
                                <span slot="title">用户列表</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="/home/orderList">
                        <template slot="title">
                            <i class="el-icon-document" style="color:rgb(43,43,43)"></i>
                            <span slot="title">订单管理</span>
                        </template>
                        <el-menu-item index="/home/orderList">
                            <template slot="title">
                                <i class="el-icon-folder-add" style="color:rgb(43,43,43)"></i>
                                <span slot="title">订单列表</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="/home/diaryList">
                        <template slot="title">
                            <i class="el-icon-s-claim" style="color:rgb(43,43,43)"></i>
                            <span slot="title">日志管理</span>
                        </template>
                        <el-menu-item index="/home/diaryList">
                            <template slot="title">
                                <i class="el-icon-folder-add" style="color:rgb(43,43,43)"></i>
                                <span slot="title">日志列表</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/home/diaryAdd">
                            <template slot="title">
                                <i class="el-icon-folder-add" style="color:rgb(43,43,43)"></i>
                                <span slot="title">新增日志</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu></el-main>
        </el-aside>
        <el-container>
            <el-header>
                <el-row type="flex" justify="space-between">
                    <el-col :span="1">
                        <div class="grid-content bg-purple">
                            <!-- 按钮:控制左侧menu菜单缩放 -->
                            <i class="el-icon-s-fold" @click="isCollapse = !isCollapse" v-if="!isCollapse"></i>
                            <i class="el-icon-s-unfold" @click="isCollapse = !isCollapse" v-else></i>
                        </div>
                    </el-col>
                    <span>OnPet后台管理系统</span>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <!-- 名字 -->
                            <span>{{ loginAdmin }}&nbsp;&nbsp;</span>
                            <!-- 头像 -->
                            <el-avatar :size="50" :src="circleUrl"></el-avatar>&nbsp;&nbsp;
                            <!-- 按钮 -->
                            <el-button type="danger" round size="mini" @click="logout"><i class="el-icon-switch-button"></i>
                                注销</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
            <!-- <el-footer>Footer</el-footer> -->
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
            isCollapse: false,
            leftMenuBox: "200px",
        }
    },
    watch: {
        isCollapse(value) {
            console.log(value);
            if (value) {
                this.leftMenuBox = "59px"
            } else {
                this.leftMenuBox = "200px"
            }
        }
    },
    computed: {
        loginAdmin() {
            if (sessionStorage.getItem("admin")) {
                let admin = sessionStorage.getItem("admin")
                admin = JSON.parse(admin)
                return admin.admin
            }
            return "管理员"
        }
    },
    methods: {
        logout() {
            sessionStorage.clear()

            this.$confirm('是否注销', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.replace("/login")
                this.$message({
                    type: 'success',
                    message: '注销成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '注销失败'
                });
            });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

<style scoped>
.left-menu-box .el-header {
    background-color: #71c9ce;
    position: relative;
    display: flex;
    align-items: center;
}

.left-menu-box .el-header img {
    width: 100%;
}

.left-menu-box {
    background-color: #71c9ce;
    text-align: left;
}

/* .left-menu-box .el-header::after {
    content: "";
    display: block;
    height: 100%;
    width: 0px;
    background-color: #eee;
    position: absolute;
    right: 0;
    top: 0;
} */

.left-menu-box .el-main {
    position: relative;
    height: calc(100% - 60px);
    width: calc(100% - 1px);
    background-color: #71c9ce;
    padding: 0;
}

.bg-purple i {
    margin-top: 15px;
    font-size: 30px;
    cursor: pointer;
}

.bg-purple-light {
    display: flex;
    align-items: center;
}

.el-container {
    width: auto;
    height: 100%;
}

.el-header,
.el-footer {
    height: 60px;
    background-color: #9ee3e7;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #71c9ce;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    /* padding: 0; */
    background-color: #fff;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
    /* overflow: hidden; */
}

.el-main::-webkit-scrollbar {
    display: none;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.el-menu-vertical-demo {
    border: 0;
    overflow: hidden;
    text-align: left;
    width: calc(100% - 2px);
}

/* .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: calc(100% - 5px);
    min-height: 400px;
    overflow: hidden;
    text-align: left;
} */
</style>
